<template>
	<view>
		<!-- <up-navbar autoBack title="日报" placeholder></up-navbar> -->
		<view class="container">
			<up-sticky bgColor="#fff">
				<view class="header">
					<view @click="prevCycle"><up-icon name="arrow-left" size="18" color="#999"></up-icon></view>
					<view class="title">{{detail.current_date}}</view>
					<view @click="nextCycle"><up-icon name="arrow-right" size="18" color="#999"></up-icon></view>
				</view>
				
				<view class="group">
					<up-subsection @change="select" :list="options" keyName="label" :current="current"></up-subsection>
				</view>
			</up-sticky>


			<view class="people" v-if="users.length > 0">
				<view v-for="item in users" :key="item.id" style="padding: 0 20rpx;">
				  <view class="list-item">
						<view style="width: 82rpx; height: 82rpx;">
							<up-image :src="item.img_url" width="100%" height="100%" radius="10rpx">
								<template #error>
									<text>{{ item.worker_name.slice(-2) }}</text>
								</template>
							</up-image>
						</view>
				    <view class="text">
				      <view class="name">{{ item.worker_name }}</view>
				      <view class="dept">{{ item.depart_name }}</view>
				    </view>
				  </view>
				</view>
			</view>
			<div v-else class="empty">
				<image src="/static/chat/empty2.png" mode="widthFix" class="empty-img"></image>
				<p v-if="current == 0" class="empty-text">暂无人提交</p>
				<p v-if="current == 1" class="empty-text">没有人迟交</p>
				<p v-if="current == 2" class="empty-text">所有人都提交了</p>
			</div>
			<view :class="{warn: true, isFixed: users.length < 9}">
				<div>{{detail.cycle == 1 ? '每天' : (detail.cycle == 2 ? '每' : '')}}{{detail.start_time}}开始提交，{{detail.end_time}}前完成为按时提交，下次统计周期开始前为迟交，否则为未提交</div>
				<div>规则创建人: {{detail.create_name}} - 江苏绿港现代农业发展股份有限公司</div>
			</view>
		</view>
	</view>
</template>

<script>
	import { getLogReport } from '@/apis/cloud/worklog'
	import { useUserStore } from '@/pinia-store/user'
	import { mapStores } from 'pinia'
	export default {
		name: 'chatLog',
		data() {
			return {
				options: [{
					cache: '按时提交 ',
					label: '',
					num: 0
				}, 
				{
					cache: '迟交 ',
					label: '',
					num: 0
				},
				{
					cache: '未提交 ',
					label: '',
					num: 0
				}],
				typeArr: ['日报', '周报', '月报'],
				current: 0,
				detail: {},
				users: [],
				currentStart: null,
				currentEnd: null,
				todayStart: null,
			}
		},
		async onLoad(e) {
			this.id = e.id;
			this.handleDetail();
		},
		computed: {
			...mapStores(useUserStore),
		},
		methods: {
			async handleDetail(id) {
				this.current = 2
				let params = {
					id: this.id
				}
				const res = await getLogReport(params)
				if (res.status > 0) {
					this.detail = res.data
					// #ifdef APP-PLUS
					uni.setNavigationBarTitle({
					  title: this.detail.type ? this.typeArr[this.detail.type - 1] : '日报'
					});
					// #endif
					this.options[0].num = res.data.stat.ontime.count
					this.options[0].label = this.options[0].cache + res.data.stat.ontime.count
					this.options[1].num = res.data.stat.late.count
					this.options[1].label = this.options[1].cache + res.data.stat.late.count
					this.options[2].num = res.data.stat.not.count
					this.options[2].label = this.options[2].cache + res.data.stat.not.count
					this.users = res.data.stat.not.users
					this.currentStart = res.data.stat.cycle_range.start;
					this.currentEnd = res.data.stat.cycle_range.end;
					this.todayStart = this.getTodayCycleStart(res.data.cycle);
					// #ifdef H5
					document.title = this.detail.type ? this.typeArr[this.detail.type - 1] : '日报'
					// #endif
				} else {
					this.$message.error(res.msg)
				}
			},
			getTodayCycleStart(cycle) {
				let d = new Date()
				if (cycle == 1) {
					return this.format(d)
				}
				if (cycle == 2) {
					let day = d.getDay() || 7
					d.setDate(d.getDate() - day + 1)
					return this.format(d)
				}
				if (cycle == 3) {
					return `${d.getFullYear()}-${d.getMonth() + 1}-01`
				}
			},
			format(date) {
				let m = date.getMonth() + 1
				let d = date.getDate()
				return `${date.getFullYear()}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`
			},
			select(e) {
				this.current = e
				if (e == 0) {
					this.users = this.detail.stat.ontime.users
				} else if (e == 1) {
					this.users = this.detail.stat.late.users
				} else {
					this.users = this.detail.stat.not.users
				}
			},
			prevCycle() {
				const cycle = this.detail.cycle
				let range = this.computeCycleRange(this.currentStart, this.currentEnd, cycle, -1)
				this.currentStart = range.start
				this.currentEnd = range.end
				this.reload()
			},
			nextCycle() {
				const cycle = this.detail.cycle
				let range = this.computeCycleRange(this.currentStart, this.currentEnd, cycle, 1)

				if (new Date(range.start) > new Date(this.todayStart)) {
					uni.showToast({
						icon: "none",
						title: "不能超过当前周期"
					})
					return
				}

				this.currentStart = range.start
				this.currentEnd = range.end

				this.reload()
			},
			computeCycleRange(start, end, cycle, offset) {
				let d1 = new Date(start);
				let d2 = new Date(end);

				// === 1.推进 start 日期 ===
				if (cycle == 1) {
					const validDays = this.detail.date.map(d => (Number(d) % 7));
					d1.setDate(d1.getDate() + offset);
					while (!validDays.includes(d1.getDay())) {
						d1.setDate(d1.getDate() + offset);
					}
				} else if (cycle == 2) {
					d1.setDate(d1.getDate() + offset * 7);
				} else if (cycle == 3) {
					d1.setMonth(d1.getMonth() + offset);
				}

				// === 2.推进 end 日期 ===
				if (cycle == 1) {
					d2.setDate(d2.getDate() + offset);
				} else if (cycle == 2) {
					d2.setDate(d2.getDate() + offset * 7);
				} else if (cycle == 3) {
					d2.setMonth(d2.getMonth() + offset);
					d2.setDate(0); // 月周期 → 月末
				}

				return {
					start: this.formatFull(d1),
					end: this.formatFull(d2)
				};
			},

			formatFull(date) {
				const pad = (n) => n < 10 ? '0' + n : n;
				return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())} ` +
					`${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
			},
			async reload() {
				let params = {
					id: this.id,
					start_time: this.currentStart,
					end_time: this.currentEnd
				}

				const res = await await getLogReport(params);
				this.detail = res.data

				this.options[0].num = res.data.stat.ontime.count
				this.options[0].label = this.options[0].cache + res.data.stat.ontime.count
				this.options[1].num = res.data.stat.late.count
				this.options[1].label = this.options[1].cache + res.data.stat.late.count
				this.options[2].num = res.data.stat.not.count
				this.options[2].label = this.options[2].cache + res.data.stat.not.count

				if (this.current == 0) {
					this.users = res.data.stat.ontime.users
				} else if (this.current == 1) {
					this.users = res.data.stat.late.users
				} else {
					this.users = res.data.stat.not.users
				}
				this.currentStart = res.data.stat.cycle_range.start
				this.currentEnd = res.data.stat.cycle_range.end
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F4F6;
	}
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 4px 20px 10px 20px;

		.title {
			font-size: 34rpx;
		}
	}
	.group {
		padding: 10px 20px;
	}
	.people {
		padding: 0 10px 6px 10px;
		background-color: #fff;
	}
	.list-item {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		.text {
			margin-left: 24rpx;
			.name {
				font-size: 32rpx;
			}
			.dept {
				font-size: 26rpx;
				color: #555;
			}
		}
	}
	.warn {
		padding: 10px;
		text-align: center;
		font-size: 26rpx;
	}
	.empty {
		text-align: center;
		padding-top: 120px;
		.empty-img {
			width: 60vw;
		}
		.empty-text {
			font-size: 28rpx;
			color: #333;
		}
	}
	.isFixed {
		position: fixed;
		bottom: 10px;
	}
</style>